/* général */
body {
    font-family: Arial, sans-serif;
    background-color: #fdfdfd;
    line-height: 1.6;
    color: #333;
}
.article-container {
    display: flex;
    align-items: center;
    background-color: #d3d3d3;
    border-radius: 10px;
    padding: 15px;
    width: 600px;
    margin-bottom: 20px;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
}

.article-image img {
    width: 100px;
    height: auto;
    border-radius: 5px;
    margin-right: 15px;
}

.article-content {
    flex: 1;
}


.article-text {
    font-size: 14px;
    color: #333;
}

.read-more {
    display: inline-block;
    padding: 8px 15px;
    background-color: #5a4a42;
    color: white;
    text-decoration: none;
    border-radius: 5px;
    font-size: 14px;
    margin-top: 10px;
    text-align: center;
}

.read-more:hover {
    background-color: #4a3a32;
}






/* Cacher le bloc de recherche sur les écrans de moins de 768px */
@media (max-width: 768px) {
    .search-widget {
        display: none !important;
    }
}


/* Ajout d'un fond bleu uniquement à la carte contenant le script */
#registerwidget {
    background-color: lightgrey!important; /* Bleu clair */
    border-radius: 10px;
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #b9b9b9 !important;
}
/* styles.css */

 .breadcrumb a {
  color: darkslategray !important;
}

.breadcrumb a:hover {
  color: #000 !important;
}

.breadcrumb {
  padding: 6px 14px !important;
  background-color: #f5f5f5 !important;
  border-radius: 6px;
  font-size: 14px;
     margin-bottom: 33px !important;
}
.breadcrumb-item {
  line-height: 1.2;
}

.breadcrumb-item + .breadcrumb-item::before {
  padding: 0 5px;
}

/* Section Auteur */
.author-info {
  border: 1px solid #ddd;
  padding: 20px;
  margin: 30px 0;
  background-color: #f9f9f9;
  border-radius: 8px;
  display: flex;
  align-items: center;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

.author-photo {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  object-fit: cover;
  margin-right: 20px;
  border: 2px solid #d63384;
}

.author-details {
  flex: 1;
}

.author-details h3 {
  margin-top: 0;
  font-size: 1.5em;
  color: #d63384;
}

.author-details p {
  margin: 10px 0;
}

.social-links {
  list-style: none;
  padding: 0;
  display: flex;
  gap: 15px;
  margin-top: 10px;
}

.social-links li a {
  text-decoration: none;
  color: #333;
  font-size: 1.3em;
  transition: color 0.3s;
}

.social-links li a:hover {
  color: #d63384;
}

.intro {
    font-size: 17px !important; /* Augmente la taille du texte */
 
}

 p {
    font-size: 16px;
}

.blog-link {
    font-size: 15px; /* Augmente la taille du texte */
    font-weight: bold; /* Rend le texte plus visible */
    background-color: #f0f0f0; /* Fond gris clair */
    padding: 8px 12px; /* Ajoute de l'espace autour du texte */
    border-radius: 5px; /* Arrondi les bords */
    text-decoration: none; /* Supprime le soulignement du lien */
    display: inline-block; /* Permet de mieux gérer la mise en page */
}


.separator {
    width: 10cm; /* Longueur de la ligne */
    height: 1px; /* Épaisseur */
    background-color: #ccc; /* Couleur gris clair */
    border: none; /* Supprime la bordure par défaut */
    margin: 20px auto; /* Centre la ligne horizontalement avec un espacement */
}


#blog .container {
    max-width: 100%;
    padding-left: 0px !important;
    padding-right: 0px !important;
}

#blog .row {
    margin-left: 0px !important;
    margin-right: 0px !important;
}

#blog .col-md-6 {
    padding-left: 0px !important;
    padding-right: 15px !important; /* Assure un bon espacement entre les colonnes */
}

@media (max-width: 768px) { /* Pour les écrans mobiles */
    .col-md-6 {
        margin-bottom: 20px; /* Ajoute un espace entre les blocs */
    }
    
    .card {
        margin-bottom: 20px !important; /* Ajoute un espace entre les cartes */
    }
}

.card-body a.btn {
    margin-top: 5px !important; /* Ajoute un espace de 15px au-dessus du bouton */
}

.col-md-6 .card {
    max-height: 250px !important;
    height: 100% !important;
    margin: 0 auto !important;
    
}

.blog-section {
    display: flex;
    flex-direction: column;
    align-items: center !important;
    text-align: center!important;
}

.clear
{
    clear:both;
    height: 0;
    overflow: hidden;
}
body
{
 font-family: 'arial'
}

/* header */
#middleinscri
{
    background-image: url(https://tonplanlibertin.fr/femme-libertine2.jpg);
    background-repeat: no-repeat;
    min-width: 500px;
    max-height: 600px;

}

#entete-css{
    padding-top: 10px;
  padding-bottom: 5px;
  margin-top:20px;
  margin-bottom: 20px;
  border-bottom: 0; /* IMPORTANT : plus de ligne ici */
}

/* la ligne fuchsia est ici, sur le container */
#entete-css .entete-inner{
  border-bottom: 2px solid #d55e9c;
  padding-bottom: 10px;
}


.logocss{
  margin: 0;          /* logo à gauche */
  padding-left: 5px;
}

#entete-css .title
{
    margin-left: 1px; 
    padding-left: 20px;
    padding-right: 1px;
    text-align: center;
    text-emphasis-color: blue;
}
.login{
  float: none;        /* Bootstrap gère */
  margin-left: 0;
  text-align: right;  /* bouton à droite */
}



.grossefesse
{
    margin-left: 20px;
    margin-bottom: 150px;
    text-align: center;
    float: none;
}
.inscri
{
    margin-left: auto;
    margin-right: 30px;
    margin-top: 30px;
    margin-bottom: 200px;
    text-align: right;
    float: none;
}

/* MESSENGER DETAILLER */

.detail
{
    margin-left: 10px;
    margin-right: 5px;
    margin-top: 10px;
    margin-bottom: 10px;
    padding-left: 10px;
    text-align: center;
    border-left: 1px solid grey; 
    float: none;
}
.texto
{
    text-align: center;
    color:grey;
}
/* TEMOIGNAGE */
.membresssss
{
    width: 300px; 
    display: inline;
    float:none;
    padding-right: 10px;
    padding-left: 20px;
    padding-bottom: 20px;
    padding-top: 5x;
    margin-left: 40px;
    margin-right: 10px;
    margin-top: 10px;
    text-align: left;
    text-decoration-color:  white;
    border: 1px solid grey; 
    background-color: #444444;
    border-radius: 3px;
    box-shadow: 0 1px 6px rgba(0,0,0, 0.2);
}
#avantagetemoi
{
}
.avantageleft
{
    max-width: 540px;
    min-width: 480px;
    max-height: 300px;
    float: left;
    display: inline-block;
    position: relative;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 5px;
    padding-bottom: 20px;
    margin-left: 20px;
    margin-right: 30px;
    margin-top: 10px;
    text-align: left;
    text-decoration-color:  white;
    border: 1px solid grey; 
    background-color: #444444;
    border-radius: 3px;
    box-shadow: 0 1px 6px rgba(0,0,0, 0.2);
}

/* membre righ ajouté */
.membresright
{
    width: 480px;
    display: inline-block;
    float: left;
    padding-left: 20px;
    padding-right: 10px;
    padding-top: 5px;
    padding-bottom: 10px;
    margin-left: 20px;
    margin-right: 10px;
    margin-top: 10px;
    text-align: left;
    text-decoration-color:  white;
    border: 1px solid grey; 
    background-color: #444444;
    border-radius: 3px;
    box-shadow: 0 1px 6px rgba(0,0,0, 0.2);
}
.membres2
{
    width: 450px;
    display: inline-block;
    float: left;
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 5px;
    text-decoration-color:  white;
    border: 1px solid grey; 
    background-color: #660e66;
    border-radius: 3px;
    box-shadow: 0 1px 6px rgba(0,0,0, 0.2);
}
.imagemembre
{
    display: inline-block;
    float: left;
}
.list-group
{
    margin-top: 20px;
    margin-left: 20px;
}
.text-white2
{
    color: gainsboro;
    text-indent:5px;
}
.lefttest
{
  display: inline-block;
    float: left;  
    margin-left: 10px;
}

.membres2:after {
  content: "";
  display: block;
  clear: both;
}
/* FOOOOTER*/

#footer
{
margin-right: auto;
}
.small-text-center
{
    text-align: center;
    display: block;
    margin-top: 10px;
    margin-right: auto;
    margin-left: auto;
    float: none;
}
.legal
{
    text-align: center;
    font-size: 80%;
    color: darkgrey;
}





/* Script Prelinker LOGIN */
<style>
#btn-ez-dropdown {
    background-color: #3498DB;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}
 
#btn-ez-dropdown:hover, #btn-ez-dropdown:focus {
    background-color: #2980B9;
}

#ez-dropdown {
    position: relative;
    display: inline-block;
}

.ez-show{
  display:block !important;
}

#ez-dropdown-content {
    display: none;
    position: absolute;
    background-color: #f1f1f1;
    /* Variable permettant de changer la largeur minimum du menu */
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}
</style>

/* Media query pour les appareils mobiles */
@media (max-width: 767px) {
  body {
    font-size: 110%; /* Augmente légèrement la taille de la police */
  }
article header .article-title{
    font-size: 26px;
  }
    
  p, a, li {
    font-size: 110%; /* Augmente légèrement la taille des paragraphes, liens, et listes */
  }

  /* Vous pouvez ajouter d'autres styles spécifiques pour les appareils mobiles ici */
  }
}

/* Media query pour les appareils mobiles */
@media (max-width: 767px) {
  .avantageleft {
    width: 100%; /* S'adapte à la largeur de l'écran */
    padding: 10px; /* Ajuste le padding selon vos besoins */
    font-size: 16px; /* Ajuste la taille de la police selon vos besoins */
    text-align: center; /* Centre le texte */
    overflow: hidden; /* Évite les débordements */
    margin-left: 0; /* Réinitialise les marges pour une meilleure adaptation */
    margin-right: 0; /* Réinitialise les marges pour une meilleure adaptation */
    box-sizing: border-box; /* Inclut le padding et la bordure dans la largeur totale */
    max-height: 500px; /* Définit la hauteur maximale à 500px */
    height: auto; /* Permet à la hauteur de s'ajuster automatiquement */
    white-space: normal; /* Permet au texte de revenir à la ligne */
  }
}

.blog
{
    width: 100%;
    display: inline-block;
    float: center;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 5px;
    padding-bottom: 10px;
    margin-left: 0px;
    margin-right: 5px;
    margin-top: 10px;
    text-align: left;
    text-decoration-color:  white;
    border: 1px solid grey; 
    background-color: #ababab;
    border-radius: 3px;
    box-shadow: 0 1px 6px rgba(0,0,0, 0.2);
}
.blogimage
{
    width: 80%;
    height: auto; /* Maintient le ratio de l'image */
    max-width: 100%; /* Empêche l'image de dépasser la taille de son conteneur */
}

.titleblog
{
    margin-top: 0px;
    text-align: left;
    font-size: 20px !important;
    font-weight: bold !important;
    margin-bottom: 0px !important; /* Réduit l'espace sous le titre */  
}
.fw-light {
    margin-top: 2px !important; /* Rapproche la date du titre */
    font-size: 14px; /* Réduit légèrement la taille pour un meilleur alignement */
    color: #666; /* Optionnel : ajuste la couleur pour un effet plus subtil */
}

.libertinage-guide {
    max-height: 250px !important;
    overflow: hidden; /* Pour s'assurer que le contenu qui dépasse est masqué */
}

 .follow-us {
            text-align: center;
            padding: 40px 0;
        }
        .follow-us p {
            font-weight: normal !important;
            margin-bottom: 10px;
        }

        .social-icons a {
            margin: 0 10px;
            font-size: 24px;
            color: #555;
        }
        .social-icons a:hover {
            color: #000;
        }
.button {
  margin-left: 25% !important;
}


@media (max-width: 576px) {
  .author-info {
    flex-direction: column;
    text-align: center;
    padding: 15px;
  }

  .author-photo {
    margin-right: 0;
    margin-bottom: 15px;
  }

  .author-details {
    width: 100%;
  }
}

#entete-css h1{
  font-size: 34px;
  font-weight: 500;
}

#entete-css h2{
  font-size: 24px;
  font-weight: 400;
  margin-top: 5px;
}


#button-search{
  background-color:#337ab7 !important;
  border-color:#337ab7 !important;
  color:#fff !important;
}

#button-search:hover{
  background-color:#1e66a3 !important;
  border-color:#1e66a3 !important;
}

 



/* MOBILE uniquement */
@media (max-width: 576px) {

  .logocss {
    margin-bottom: 15px;
  }

  .logocss img {
    display: block;
    margin-left: auto;
    margin-right: auto;
  }

}


.ptprelinker-legend-form {
  color: #333333 !important; /* mets la couleur que tu veux */
}

.ptprelinker-cgu-link {
  color: #3a6ea5 !important;   /* bleu discret */
  text-decoration: none;
}

.ptprelinker-cgu-link:hover {
  color: #2d5c8a !important;
  text-decoration: underline;
}


/* Contour (carré) du checkbox : version widget (label pseudo-element) */
.ptprelinker-label-checkbox::before{
  border-color: #3a6ea5 !important;      /* contour bleu */
  box-shadow: none !important;
}

/* Si le widget colore via un outline/box-shadow au focus */
.ptprelinker-input-checkbox:focus + .ptprelinker-label-checkbox::before,
.ptprelinker-input-checkbox:active + .ptprelinker-label-checkbox::before{
  border-color: #3a6ea5 !important;
  box-shadow: 0 0 0 2px rgba(58,110,165,.25) !important; /* halo bleu discret */
}

/* Quand c'est coché (fond/coche) */
.ptprelinker-input-checkbox:checked + .ptprelinker-label-checkbox::before{
  background-color: #3a6ea5 !important;
  border-color: #3a6ea5 !important;
}

.ptprelinker-legend-form{
  font-size: 22px !important;
}


/* --- Compactage bloc Recherche --- */

.search-widget{
  padding: 0 !important;
}

/* Header */
.search-widget .card-header{
  padding: 8px 15px !important;
  font-size: 16px;
}

/* Body */
.search-widget .card-body{
  padding: 10px 15px !important;
}

/* Input + bouton plus compacts */
.search-widget .form-control{
  height: 34px !important;
  padding: 6px 10px !important;
}

.search-widget .btn{
  height: 34px !important;
  padding: 6px 12px !important;
}

.text-muted{
  font-size: 14px;
  font-style: normal !important;
}



/* Taille exacte widget recherche */

.search-widget .card-header{
  font-size: 14px !important;
  font-weight: 400 !important;   /* normal */
  background-color: #f5f5f5 !important; /* plus léger que le gris actuel */
  color: #555 !important;        /* moins contrasté */
}

.search-widget .form-control{
  font-size: 14px !important;   /* texte saisi */
}

.search-widget .form-control::placeholder{
  font-size: 14px !important;   /* "Tapez ici..." */
}

.search-widget #button-search{
  font-size: 14px !important;
}


/* ====== ARTICLE : TITRES + MARGES (PROCHE MODELE) ====== */

/* H1 de l'article */
article header .article-title{
  font-size: 32px !important;
  font-weight: 500 !important;
  line-height: 1.25 !important;
  margin: 0 0 10px 0 !important;
}

/* H2 */
article h2{
  font-size: 32px !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  margin: 26px 0 12px 0 !important;
}

/* H3 */
article h3{
  font-size: 24px !important;
  font-weight: 500 !important;
  line-height: 1.25 !important;
  margin: 20px 0 10px 0 !important;
}

/* H4 */
article h4{
  font-size: 20px !important;
  font-weight: 500 !important;
  line-height: 1.3 !important;
  margin: 16px 0 8px 0 !important;
}

/* Pas de gros trou après un titre */
article h2 + p,
article h3 + p,
article h4 + p,
article h2 + ul,
article h3 + ul,
article h4 + ul,
article h2 + ol,
article h3 + ol,
article h4 + ol{
  margin-top: 0 !important;
}

/* Réduit l’espace ENTRE un paragraphe et la liste qui suit */
article p + ul,
article p + ol{
  margin-top: 0 !important;
}

article p:has(+ ul),
article p:has(+ ol){
  margin-bottom: 6px !important;
}